import React, { Component, Suspense } from "react";
import {
	HashRouter as Router,
	Link
} from "react-router-dom";
import {
	routes,
	renderRoutes
} from "./router/routes";
import PageLoading from "./components/common/PageLoading";
import { request } from "./services/index";

class App extends Component {
	state = {
		isPageLoading: true
	}

	componentDidMount() {
		this.getUserInfo();
	}

	getUserInfo() {
		request({
			api: "customer_header"
		}).then((res) => {
			this.setState({
				isPageLoading: false
			});
		}).catch((err) => {
			this.setState({
				isPageLoading: false
			});
		});
	}

	render() {
		return (
			<Router>
				<div>
					{
						this.state.isPageLoading ? <PageLoading /> : ""
					}
					<ul className="nav">
						<li>
							<Link to="/" replace>Index</Link>
						</li>
						<li>
							<Link to="/product/list">Product</Link>
						</li>
						<li>
							<Link to="/trade">Trade</Link>
						</li>
					</ul>
					<Suspense fallback={<div>Loading...</div>}>
						{renderRoutes(routes)}
					</Suspense>
				</div>
			</Router>
		);
	}
}

export default App;
